<template>
  <el-dialog
    :model-value="dialogVisible"
    title="产品明细列表"
    width="60%"
    draggable
    destroy-on-close
    @close="handleDialog('Cancel')"
    :close-on-click-modal="false"
  >
    <el-form ref="baseFormRef" :model="baseFrom" label-position="left">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="品牌">
            <el-input v-model="baseFrom.name" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品编码/名称">
            <el-input v-model="baseFrom.order_no" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品类目">
            <el-select v-model="baseFrom.name">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="flex_end">
            <el-button
              type="primary"
              size="small"
              @click="handleForm(baseFormRef)"
            >
              查询
            </el-button>
            <el-button @click="handleForm(baseFormRef)" size="small">
              重置
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vab-table
      tableHeight="360"
      :page="page"
      :loading="loading"
      :listData="productList"
      :columnsList="cloums"
    ></vab-table>
    <template #footer>
      <div class="dialog-footer flex_center">
        <el-button @click="handleDialog('Cancel')" size="small">返回</el-button>
        <el-button type="primary" size="small" @click="handleDialog('Confirm')">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false,
      },
      productList: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    data() {
      return {
        loading: false,
        baseFrom: {
          brand: '',
          order_no: '',
          name: '',
        },
        page: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
        cloums: [
          { label: '品牌', prop: 'brand', type: '' },
          { label: '一级类目', prop: 'leve1_class', type: '' },
          { label: '二级类目', prop: 'leve2_class', type: '' },
          { label: '产品编码', prop: 'order_no', type: '' },
          { label: '产品名称', prop: 'goods_name', type: '' },
          { label: '售价', prop: 'selling_price', type: 'money' },
        ],
        dataSource: [],
      }
    },
    mounted() {},
    methods: {
      handleDialog(value) {
        if (value == 'Cancel' || value == 'Confirm') {
          this.$emit('handleDialog', false)
        }
      },
    },
  }
</script>
<style scoped></style>
